<template>
  <el-dialog
    :title="'New payroll'"
    :visible.sync="dialogVisible"
    :fullscreen="true"
    top="5vh"
    width="75%"
    :before-close="handleClose">
    <div class="xlSeeFrom" v-if="dialogVisible">

      <div class="tab-item">
        <!--工资单说明-->
        <div class="item">
          <p class="tab-title">Payroll Description</p>
          <div class="tab">
            <table>
              <tr>
                <td>Payroll ID</td>
                <td>Prepared by</td>
                <td>Belong Time</td>
                <td>Submit Time</td>
              </tr>
              <tr>
                <td>{{form.salary_id}}</td>
                <td>{{form.hr_name}}</td>
                <td>
                  <el-date-picker
                    v-model="form.belong_date"
                    type="month"
                    placeholder="select"
                    format="yyyy-MM"
                    value-format='yyyy-MM'>
                  </el-date-picker>
                </td>
                <td>{{form.submit_time}}</td>
              </tr>
            </table>
          </div>
        </div>
        <!--汇率设置-->
        <div class="item">
          <p class="tab-title">Set Exchange Rate</p>
          <div class="tab">
            <table>
              <tr>
                <td>EUR-UAH<span style="color:red;font-size:16px;">*</span></td>
                <td>USD-UAH<span style="color:red;font-size:16px;">*</span></td>
                <td>CNY-UAH<span style="color:red;font-size:16px;">*</span></td>
              </tr>
              <tr>
<!--                <td><el-input v-model="form.eur_to_uah" onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"></el-input></td>-->
<!--                <td><el-input v-model="form.usd_to_uah" onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"></el-input></td>-->
<!--                <td><el-input v-model="form.cny_to_uah" onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"></el-input></td>-->
                <td><el-input-number v-model="form.eur_to_uah" :precision="2" :step="0.1" :min="0" ></el-input-number></td>
                <td><el-input-number v-model="form.usd_to_uah" :precision="2" :step="0.1" :min="0" ></el-input-number></td>
                <td><el-input-number v-model="form.cny_to_uah" :precision="2" :step="0.1" :min="0" ></el-input-number></td>
              </tr>
            </table>
          </div>
        </div>
      </div>
      <!--员工列表-->
      <div class="personList">
        <div class="title">
          Staff Information
        </div>
        <template>
          <el-table
            :header-cell-style="{background:'#F2F6FC',color:'#606266'}"
            :data="tableData"
            border
            style="width: 100%"
            ref="tableData"
            class="emp_table"
            v-if="tableData">
            <el-table-column
              align="center"
              prop="pe_number"
              label="PE Number"
              width="180">
            </el-table-column>
            <el-table-column
              align="center"
              prop="pe_name"
              label="PE Name">
            </el-table-column>
            <el-table-column
              align="center"
              prop="salary_money"
              label="Salary(editable)">
              <template slot-scope="scope">
                <el-input type="number" v-model="scope.row.salary_money" :max="test"  @change="maxSalary(scope)"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="contract_currency"
              label="Contract Currency">
            </el-table-column>
            <el-table-column
              align="center"
              prop="payment_currency"
              label="Payment Currency">
            </el-table-column>
            <el-table-column
              align="center"
              prop="pay_money"
              label="Pay Money(payment currency)">
              <template slot-scope="{ row }">
                {{ test(row.salary_money,row.contract_currency,row.payment_currency) }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="Action">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="edit(scope)">edit Working Hours</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
        <el-pagination
          align="right"
          @current-change="curChange"
          :current-page.sync="curPage"
          :page-size="10"
          layout="total,prev,pager,next,jumper"
          :total="count">
        </el-pagination>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="save">Save</el-button>
      <el-button type="success" @click="put">Submit</el-button>
      <el-button type="info" @click="handleClose">Cancel</el-button>
    </span>
    <editWorkHourForm ref="editWorkHourForm"></editWorkHourForm>
  </el-dialog>
</template>

<script>
import {salarySaveUser,getSalaryDetail,submitSalary} from '@/request/other_api'
import editWorkHourForm from "./editWorkHourForm";
export default {
  data(){
    return {
      dialogVisible:false,
      form:{},
      tableData: [],
      salaryList:[],
      curPage:1,
      count:0,
    }
  },
  components:{
    editWorkHourForm
  },
  methods:{
    //max salary
    maxSalary(data){
      if(this.salaryList[data.$index] < data.row.salary_money){
        this.$message.error('The salary cannot be greater than the current salary!')
        this.tableData[data.$index].salary_money = this.salaryList[data.$index]
      }
    },
    formatData(salary_id){
      getSalaryDetail({
        salary_id:salary_id
      }).then(res => {
        this.form = res.salary_base
        this.tableData = res.data
        this.count = res.count

        this.tableData.forEach(item => {
          this.salaryList.push(item.salary_money)
        })
      })
    },
    test(salary,contract,payment) {
      let exchange_rate = [
        1,1/this.form.eur_to_uah,1/this.form.usd_to_uah,1/this.form.cny_to_uah,
        1,this.form.eur_to_uah,this.form.eur_to_uah/this.form.usd_to_uah,this.form.eur_to_uah/this.form.cny_to_uah,
        1,this.form.usd_to_uah,this.form.usd_to_uah/this.form.eur_to_uah,this.form.usd_to_uah/this.form.cny_to_uah,
        1,this.form.cny_to_uah,this.form.cny_to_uah/this.form.eur_to_uah,this.form.cny_to_uah/this.form.usd_to_uah]
      let index
            if (contract == 'UAH') {
        if(payment == 'UAH') {
          index = 0
        }
        if (payment == 'EUR') {
          index = 1
        }
        if (payment == 'USD') {
          index = 2
        }
        if (payment == 'CNY') {
          index = 3
        }
      }
      if (contract == 'EUR') {
        if(payment == 'EUR') {
          index = 4
        }
        if (payment == 'UAH') {
          index = 5
        }
        if (payment == 'USD') {
          index = 6
        }
        if (payment == 'CNY') {
          index = 7
        }
      }
      if (contract == 'USD') {
        if(payment == 'USD') {
          index = 8
        }
        if (payment == 'UAH') {
          index = 9
        }
        if (payment == 'EUR') {
          index = 10
        }
        if (payment == 'CNY') {
          index = 11
        }
      }
      if (contract == 'CNY') {
        if(payment == 'CNY') {
          index = 12
        }
        if (payment == 'UAH') {
          index = 13
        }
        if (payment == 'EUR') {
          index = 14
        }
        if (payment == 'USD') {
          index = 15
        }
      }
      salary = salary * exchange_rate[index]
      salary = salary.toFixed(2)
      return salary
    },
    //保存
    save(){
      if(!this.form.eur_to_uah){
        this.$message.error('EUR-UAH is empty!')
        return
      }
      if(!this.form.usd_to_uah){
        this.$message.error('USD-UAH is empty!')
        return
      }
      if(!this.form.cny_to_uah){
        this.$message.error('CNY-UAH is empty!')
        return
      }
      let data = []
      this.tableData.forEach(item => {
        data.push({'pe_username':item.pe_username,'salary_money':item.salary_money,'pay_money':item.pay_money})
      })
      submitSalary({
        is_commit:0,
        salary_id:this.form.salary_id,
        belong_date:this.form.belong_date,
        submit_time:this.form.submit_time,
        eur_to_uah:this.form.eur_to_uah,
        cny_to_uah:this.form.cny_to_uah,
        usd_to_uah:this.form.usd_to_uah,
        data:data
      }).then(res =>{
        if(res.code == 200){
          this.$message.success('Save Success!')
          this.dialogVisible = false
          this.$parent.getSalaryList()
        }
      })
    },
    // 提交
    put(){
      if(!this.form.eur_to_uah){
        this.$message.error('EUR-UAH is empty!')
        return
      }
      if(!this.form.usd_to_uah){
        this.$message.error('USD-UAH is empty!')
        return
      }
      if(!this.form.cny_to_uah){
        this.$message.error('CNY-UAH is empty!')
        return
      }
      let data = []
      this.tableData.forEach(item => {
        data.push({'pe_username':item.pe_username,'salary_money':item.salary_money,'pay_money':item.pay_money})
      })
      submitSalary({
        is_commit:1,
        salary_id:this.form.salary_id,
        belong_date:this.form.belong_date,
        submit_time:this.form.submit_time,
        eur_to_uah:this.form.eur_to_uah,
        cny_to_uah:this.form.cny_to_uah,
        usd_to_uah:this.form.usd_to_uah,
        data:data
      }).then(res =>{
        if(res.code == 200){
          this.$message.success('Submit Success!')
          this.dialogVisible = false
          this.$parent.getSalaryList()
        }
      })
    },
    edit(data){
      this.$refs.editWorkHourForm.editDialog = true
      this.$refs.editWorkHourForm.formatData(this.form,data.row)
    },
    //关闭前清空
    handleClose (done) {
      this.dialogVisible = false
    },
    //  点击每页刷新获取数据
    curChange (currentPage) {
      this.curPage = currentPage
      this.getEmp()
    },
    // 上一页
    prevClick () {
      this.curPage < 1 ? this.curPage = 1 : this.curPage--
      this.getEmp()
    },
    // 下一页
    nextClick () {
      this.curPage >= this.count ? this.curPage = this.count : this.curPage++
      this.getEmp()
    },
    getEmp(){
      this.salaryList = []

      let data = []

      this.tableData.forEach(item => {
        data.push({'pe_username':item.pe_username,'salary_money':item.salary_money,'pay_money':item.pay_money})
      })

      salarySaveUser({
        salary_id:this.form.salary_id,
        data:data
      }).then(res => {
        if(res.code != 200){
          var list = ''
          res.error_pe_username.forEach(item => {
            list += ' '+item+' '
          })
          this.$message.error(list + 'pay slip is wrong, please fill in again!')
        }
      })

      getSalaryDetail({
        salary_id:this.form.salary_id,
        page: this.curPage,
      }).then(res => {
        if(res.code === 200){
          this.count = res.count
          this.tableData = res.data
        }
      })
    },
  }
}
</script>

<style lang="less" scoped>
/deep/ .el-form-item__label {
  background-color: #eee;
  text-align: center;
  //width: 121px;
}
/deep/ .el-dialog__header {
  padding: 20px 20px 10px;
  border-bottom: 1px solid #eee;
}
/deep/ .el-dialog__body {
  padding: 10px 20px;
  color: #333;
  font-size: 15px;
  word-break: break-all;
}
.step{
  margin-bottom: 10px;
}
.content{
  margin-top: 10px;
  margin-bottom: 10px;

}
.tab-item{
  width: 100%;
  padding: 10px 0;
  border: 1px solid #eee;

  table{
    width: 100%;
    font-family: verdana,arial,sans-serif;
    font-size:14px;
    color:#333333;
    border-width: 1px;
    border-color: #999999;
    border-collapse: collapse;
  }
  table td{
    border-width: 1px;
    padding: 4px;
    border-style: solid;
    border-color: #999999;
    width: 25%;
  }
  table tr:nth-child(2n+1){
    background-color:#F2F6FC;
    height:50px;
    text-align: center;
  }
  table tr:nth-child(2n){
    background-color: #fff;
    height:50px;
    text-align: center;
  }

.tab-title{
  font-family: SourceHanSansSC;
  font-weight: 700;
  font-size: 20px;
  color: rgb(16, 16, 16);
  font-style: normal;
  letter-spacing: 0px;
  line-height: 30px;
  text-decoration: none;
  padding: 5px 10px;
}
/deep/ .el-date-editor.el-input, .el-date-editor.el-input__inner {
  width: 100%;
 }
}
.personList{
  .title{
    font-family: SourceHanSansSC;
    font-weight: 700;
    font-size: 20px;
    color: rgb(16, 16, 16);
    font-style: normal;
    letter-spacing: 0px;
    line-height: 30px;
    text-decoration: none;
    padding: 5px 10px;
    border-bottom: 1px solid #eee;
  }
}

</style>
